var MYCALENDAR = function() {
    var doc;
    var _parent;
    var _calendar;
    var WIDTH   = "280px";
    var HEIGHT  = "190px";
    var BGCOLOR = "#EAEAEA";
    var weekdate = new Array("CN", "T2", "T3", "T4", "T5", "T6", "T7");
    var mode;
    var day;
    var month;
    var year;
    var callback;

    return {
        create: function() {
            doc = document.documentElement;
            this.createStyle();
            this.createContainer();
            this.createHeader();
            this.createWeek();
            _calendar.style.visibility = "hidden";
            doc.insertBefore(_calendar, doc.firstChild);
        },
        createStyle: function(){
            var style = document.createElement("style");
            style.type = "text/css";

            style.innerHTML = "";

            style.innerHTML += "\n.mycalendar_wrappper {";
            style.innerHTML += "\n  width: " + WIDTH + ";";
            style.innerHTML += "\n  height: " + HEIGHT + ";";
            style.innerHTML += "\n  background-color: " + BGCOLOR +";";
            style.innerHTML += "\n  box-shadow: 0px 0px 4px 1px #888;";
            style.innerHTML += "\n  -moz-box-shadow: 0px 0px 4px 1px #888;";
            style.innerHTML += "\n  -webkit-box-shadow: 0px 0px 4px 1px #888;";
            style.innerHTML += "\n  z-index: 1000;";
            style.innerHTML += "\n  position: absolute;";
            style.innerHTML += "\n}";

            style.innerHTML += "\n.mycalendar_header_wrapper {";
            style.innerHTML += "\n   width: 100%;";
            style.innerHTML += "\n   float: left;";
            style.innerHTML += "\n   height: 30px;";
            style.innerHTML += "\n}";

            style.innerHTML += "\n.mycalendar_header_text {";
            style.innerHTML += "\n   text-align: center;";
            style.innerHTML += "\n   float: left;";
            style.innerHTML += "\n   width: 200px;";
            style.innerHTML += "\n   height: 30px;";
            style.innerHTML += "\n   line-height: 30px;";
            style.innerHTML += "\n   color: #184EF5;";
            style.innerHTML += "\n   font-size:120%;";
            style.innerHTML += "\n}";

            style.innerHTML += "\n.mycalendar_header_button {";
            style.innerHTML += "\n   text-align: center;";
            style.innerHTML += "\n   width: 20px;";
            style.innerHTML += "\n   height: 30px;";
            style.innerHTML += "\n   line-height: 30px;";
            style.innerHTML += "\n   font-size:80%;";
            style.innerHTML += "\n   color: #184EF5;";
            style.innerHTML += "\n   font-weight: bold;";
            style.innerHTML += "\n   float:left;";
            style.innerHTML += "\n}";

            style.innerHTML += "\n.mycalendar_header_text:hover, .mycalendar_header_button:hover {";
            style.innerHTML += "\n  cursor:pointer;";
            style.innerHTML += "\n  background-color: #AAC2F7;";
            style.innerHTML += "\n}";

            style.innerHTML += "\n.mycalendar_week_wrapper {";
            style.innerHTML += "\n  border-bottom: 1px solid #184EF5;";
            style.innerHTML += "\n  height: 20px;";
            style.innerHTML += "\n  line-height: 20px;";
            style.innerHTML += "\n  width: 100%;";
            style.innerHTML += "\n  float: left;";
            style.innerHTML += "\n}"

            style.innerHTML += "\nul.mycalendar_week {";
            style.innerHTML += "\n  margin-left:-40px;";
            style.innerHTML += "\n  margin-top: 0px;";
            style.innerHTML += "\n  list-style-type: none;";
            style.innerHTML += "\n  color: #184EF5;";
            style.innerHTML += "\n  display: inline-block;";
            style.innerHTML += "\n  width: 100%;";
            style.innerHTML += "\n}";

            style.innerHTML += "\nul.mycalendar_week li {";
            style.innerHTML += "\n  float: left;";
            style.innerHTML += "\n  text-align: center;";
            style.innerHTML += "\n  width: 40px;";
            style.innerHTML += "\n}";

            style.innerHTML += "\nul.mycalendar_week li:first-child {";
            style.innerHTML += "\n  color: #EA2333;";
            style.innerHTML += "\n}";

            style.innerHTML += "\nul.mycalendar_week li:last-child {";
            style.innerHTML += "\n  color: #FF7537;";
            style.innerHTML += "\n}";

            document.getElementsByTagName("head")[0].appendChild(style);
        },
        createContainer: function() {
            _calendar = document.createElement("div");
            _calendar.id = "_calendar";
            _calendar.className = "mycalendar_wrappper";
        },
        createHeader: function() {
            var divHeader = document.createElement("div");
            divHeader.className = "mycalendar_header_wrapper";

            var btnPreviousYear = document.createElement("div");
            btnPreviousYear.className = "mycalendar_header_button";
            btnPreviousYear.innerHTML = "<<";
            divHeader.appendChild(btnPreviousYear);

            var btnPreviousMonth = document.createElement("div");
            btnPreviousMonth.className = "mycalendar_header_button";
            btnPreviousMonth.innerHTML = "<";
            divHeader.appendChild(btnPreviousMonth);

            var textMonth = document.createElement("div");
            textMonth.className = "mycalendar_header_text";
            textMonth.innerHTML = "Tháng 12 năm 2012";
            divHeader.appendChild(textMonth);

            var btnNextMonth = document.createElement("div");
            btnNextMonth.className = "mycalendar_header_button";
            btnNextMonth.innerHTML = ">";
            divHeader.appendChild(btnNextMonth);

            var btnNextYear = document.createElement("div");
            btnNextYear.className = "mycalendar_header_button";
            btnNextYear.innerHTML = ">>";
            divHeader.appendChild(btnNextYear);

            _calendar.appendChild(divHeader);
        },
        createWeek: function() {
            var divWeek = document.createElement("div");
            divWeek.className = "mycalendar_week_wrapper";

            var week = document.createElement("ul");
            week.className = "mycalendar_week";

            for (var i = 0; i < weekdate.length; i++) {
                var week_day = document.createElement("li");
                week_day.innerHTML = weekdate[i];
                week.appendChild(week_day);
            }
            divWeek.appendChild(week);
            _calendar.appendChild(divWeek);
        },
        showMonth:function(month, year){

        },
        getPosition: function(element) {
            var left = 0;
            var top  = 0;
            var height = element.offsetHeight;
            var width  = element.offsetWidth;
            if (element.offsetParent) {
                do {
                    left += element.offsetLeft;
                    top  += element.offsetTop;
                } while (element = element.offsetParent)
            }
            return { x: left, y: top, h:height, w:width};
        },
        show: function(parent) {
            if (!_calendar) {
                this.create();
            }
            if (_calendar.style.visibility == "visible") {
                this.hide();
            }
            else {
                _parent = this.getPosition(parent);
                _calendar.style.marginLeft = _parent.x + "px";
                _calendar.style.marginTop = _parent.y + _parent.h + 5 + "px";
                _calendar.style.visibility = "visible";
                _calendar.onclick = function(){MYCALENDAR.hide();};
            }
        },
        hide: function() {
            _calendar.style.visibility = "hidden";
        }
    }
}();
